import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import NotificationBanner from '../../ch/components/NotificationBanner.vue'

<Meta
  title="Components/NotificationBanner"
  component={NotificationBanner}
  argTypes={{
    type: { control: { type: 'select', options: ['info', 'warning', 'error', 'success'] } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { NotificationBanner },
  template:
    `
    <div style="min-height: 100vh">
      <NotificationBanner :isClosed="isClosed" :isFixed="isFixed" :type="type" />
    </div>
    `
})


# Notification Banner

Use this component for cookie consent banner.

## Accessibility

The links in the cookie banner should be the first focusable elements in the page, before the skip link and before the website’s main navigation. Therefore, put the notification banner component at the top of the DOM.

## Example

<ArgsTable story="Example" />

<Canvas>
  <Story
    name="Example"
    args={{
      type: 'info',
      isFixed: false,
      isClosed: false
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>


